<template>
	<div class="rnaTypeChart">
		<div v-loading="loading" id="chartId" style="width: 100%;height: 400px" />
	</div>
</template>

<script>
  import {getVirusStatistic} from "@/api/statistic";

  export default {
    name: "rnaTypeChart",
		props: ['virusSpecies'],
    data() {
      return {
        species: [],
				list: [],
				chart: null,
        loading: false,
			}
    },
    watch: {
      virusSpecies: {
        handler(newVal, oldVal) {
          console.log(newVal)
          this.getVirusTotalBySpecies()
        },
        immediate: true
      }
    },
		created() {
		},
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        this.chart = this.$echarts.init(document.getElementById('chartId'))
      },
      async getVirusTotalBySpecies() {
        this.loading = true
        const res = await getVirusStatistic({virusSpecies: this.virusSpecies === 'All the virus' ? null : this.virusSpecies})
        if(res) {
          this.setOptions(res.data)
        }
        this.loading = false
      },
			setOptions(data) {
        // let xArr = ['mRNA', 'lncRNA', 'circRNA', 'sRNA'];
        let xArr = ['lncRNA'];
        let yArr = [0, 0, 0, 0]
        data.map(n => {
          let idx = xArr.indexOf(n.rna_type)
          if (idx > -1) {
            yArr[idx] = n.num
					}
				})

        let option = {
          grid: {
            bottom: 100
					},
          title: {
            // text: 'Numbers of RNA types in ' + this.virusSpecies,
            text: 'Numbers of lncRNA',
						left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: xArr,
						// name: 'RNA type',
            nameLocation:"middle",
						nameGap: 30
          },
          color: ['#11427d'],
          yAxis: {
            type: 'value',
            name: 'Numbers',
            // nameGap: '30',
            // nameLocation:"center",
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisLabel: {
              show: true, // 不显示坐标轴上的文字
            },

          },
          //头部显示
          label: {
            show: true,
            position: 'top',
            color: '#11427d',
          },
          series: [
            {
              data: yArr,
              type: 'bar',
              barWidth : 60, //柱图宽度
            }
          ]
        };
        this.chart.setOption(option)
			},
    }
  }
</script>

<style lang="stylus" scoped>

	.rnaTypeChart {

	}
</style>
